// 导入 vue-router 包
import VueRouter from 'vue-router'
// 导入 tabbar 对应的四个组件模板
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
import ShopcartContainer from './components/tabbar/ShopcartContainer.vue'
import SearchContainer from './components/tabbar/SearchContainer.vue'

// 创建路由对象
const router = new VueRouter({
    // 配置路由匹配规则
    routes: [
      { path: '/home', component: HomeContainer},
      { path: '/member', component: MemberContainer},
      { path: '/shopcart', component: ShopcartContainer},
      { path: '/search', component: SearchContainer},
      { path: '/', redirect: '/home'},
    ],
    /*
    当前被点击的按钮会自动添加一个类名 router-link-active, 因此使用 linkActiveClass 属性，把默认的类名修改为 mui-active ，
    就可以点击当前按钮使其高亮显示
    */
    linkActiveClass: 'mui-active'
})

// ES6 语法把路由对象暴露到外面
export default router